<!DOCTYPE HTML>
<html lang="zh">

<head>
    <!-- 引入外部 CSS 文件以应用样式 -->
    <link rel="stylesheet" href="styles.css">
    <!-- 设置字符编码为 UTF - 8 -->
    <meta charset="utf-8">
    <!-- 页面标题，可动态切换语言 -->
    <title id="page_title">404 - 页面未找到</title>
    <!-- 页面描述，有助于搜索引擎优化 -->
    <meta name="description" content="您访问的页面不存在，返回主页继续探索。">
    <!-- 页面关键词，有助于搜索引擎优化 -->
    <meta name="keywords" content="404, 页面未找到, 返回主页">
</head>

<body>
    <!-- 语言选择下拉框 -->
    <select id="lang-selector">
        <option value="zh">中文</option>
        <option value="ru">Русский</option>
        <option value="en">English</option>
    </select>
    <!-- 404 错误大标题，可动态切换语言 -->
    <h1 id="error_heading">404 - 页面不见了</h1>
    <!-- 错误提示信息，可动态切换语言 -->
    <p id="error_message">抱歉，您访问的页面不存在。您可以返回主页继续探索。</p>
    <!-- 返回主页链接 -->
    <a id="home_link" href="https://zhiheyuan.github.io/blog.github.io/">返回主页</a>

    <script>
        // 多语言文本对象，包含不同语言的页面内容
        const texts = {
            "zh": {
                title: "404 - 页面未找到",
                errorHeading: "404 - 页面不见了",
                errorMessage: "抱歉，您访问的页面不存在。您可以返回主页继续探索。",
                homeLinkText: "返回主页",
                langOptions: {
                    zh: "中文",
                    en: "English",
                    ru: "Русский"
                }
            },
            "en": {
                title: "404 - Page Not Found",
                errorHeading: "404 - Page Not Found",
                errorMessage: "Sorry, the page you are looking for does not exist. You can return to the home page to continue exploring.",
                homeLinkText: "Back to Home",
                langOptions: {
                    zh: "中文",
                    en: "English",
                    ru: "Русский"
                }
            },
            "ru": {
                title: "404 - Страница не найдена",
                errorHeading: "404 - Страница не найдена",
                errorMessage: "Извините, страница, которую вы ищете, не существует. Вы можете вернуться на главную страницу, чтобы продолжить поиск.",
                homeLinkText: "Вернуться на главную",
                langOptions: {
                    zh: "中文",
                    en: "English",
                    ru: "Русский"
                }
            }
        };

        // 获取语言选择下拉框元素
        const langSelector = document.getElementById('lang-selector');
        // 获取页面标题元素
        const titleElement = document.getElementById('page_title');
        // 获取 404 错误大标题元素
        const errorHeading = document.getElementById('error_heading');
        // 获取错误提示信息元素
        const errorMessage = document.getElementById('error_message');
        // 获取返回主页链接元素
        const homeLink = document.getElementById('home_link');

        // 从本地存储中获取用户之前选择的语言，若没有则默认中文
        let currentLang = localStorage.getItem('selectedLanguage') || 'zh';
        // 设置下拉框初始选中值
        langSelector.value = currentLang;

        // 语言切换函数
        function switchLanguage() {
            // 获取当前选择的语言
            currentLang = langSelector.value;
            // 将选择的语言存储到本地存储
            localStorage.setItem('selectedLanguage', currentLang);

            // 更新页面标题
            titleElement.textContent = texts[currentLang].title;
            // 更新 404 错误大标题
            errorHeading.textContent = texts[currentLang].errorHeading;
            // 更新错误提示信息
            errorMessage.textContent = texts[currentLang].errorMessage;
            // 更新返回主页链接文本
            homeLink.textContent = texts[currentLang].homeLinkText;

            // 更新语言选择下拉框选项文本
            const options = langSelector.options;
            for (let i = 0; i < options.length; i++) {
                const langCode = options[i].value;
                options[i].text = texts[currentLang].langOptions[langCode];
            }
        }

        // 页面加载时初始化语言
        switchLanguage();
        // 监听语言选择下拉框的变化事件
        langSelector.addEventListener('change', switchLanguage);
    </script>
</body>

</html>